<template>
	<view class="container" v-if='!status'>
	<view class="login-container" v-if="!isLogin">
			
		
		<!-- 输入框：用户名 -->
		<view class="input-group">
			<uni-easyinput  v-model="uname" placeholder="用户名/邮箱/手机号" :inputBorder="false"/>
		</view>
		<!-- 输入框：密码 -->
		<view class="input-group">
			<uni-easyinput  v-model="upwd" placeholder="密码" type="password" :inputBorder="false"/>
			<text style="color: #808080;">|</text>
			<view @click="waitbuild" style="color: #808080;">忘记密码</view>
		</view>
		<!-- 按钮：提交 -->
		<button type="default" :class="checked?'loginbtn':'disabled'" @click="checkLogin">登录</button>
		<!-- 超链接：跳转到注册组件 -->
		<view :status='status' @click="goRegister" style="padding: 15rpx; color: #808080;">还没账号？立即注册</view>
		<!-- 其他登录方式 -->
		<view class="loginHr">———— 其他登录方式 ————</view>
		<!-- 三个第三方登录方式 -->
		<view class="other-platform" @click="waitbuild">
			<view class="icontext">
				<uni-icons type="weixin" size="42"></uni-icons>
				<view>微信</view>
			</view>
			<view class="icontext">
				<uni-icons type="qq" size="42"></uni-icons>
				<view>QQ</view>
			</view>
			<view class="icontext">
				<uni-icons type="weibo" size="42"></uni-icons>
				<view>微博</view>
			</view>
			
		</view>
			<!-- 同意条例 -->
			<view class="check">
				<label @click="checked=!checked">
					<checkbox :checked="checked"/>
					<text :class="checked?'agree':'notAgree'">登录代表您同意</text><text class="rules">用户隐私条款</text>
				</label>
				
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props:{
			status:{
				type:Boolean,
				default:''
			},
			isLogin:{
				type:Boolean,
				default:'',
			}
		},
		data() {
			return {
				checked:false,
				uname:'', //账号
				upwd:'', //密码
			};
		},
		mounted(){
			
		},
		methods:{
			checkLogin(){
				let {uname,upwd} = this
				let url = this.$url.login
				if(!this.checked)return
				if(!upwd){
					uni.showToast({
						title:'请输入密码！',
						icon:'error'
					})
					return
				}else if(!uname){
					uni.showToast({
						title:'请输入账号！',
						icon:'error'
					})
					return
				}
				uni.showLoading({
					title:"正在登录",
					mask:true,
				})
				console.log("账号：",uname,"密码：",upwd);
				uni.request({
					method:"POST",
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					data:{uname:uname,upwd:upwd},
					url:url,
					success: (res) => {
						//console.log(res);
						if(res.data.code==200){
							uni.showToast({
								title:"登录成功",
								icon:"success",
							})
							// 登录成功后立刻再次发起异步请求查询当前登录的用户的账号信息用于在user-center做数据渲染
							this.getUserInfo()
							
							
							getApp().globalData.isNotLogin = false
							getApp().globalData.userName = this.uname
							this.uname=''
							this.upwd=''
							this.checked=!this.checked
							console.log("登录组件将APP全局数据isNotLogin改为了：",getApp().globalData.isNotLogin);
							uni.switchTab({
								url:'/pages/index/index',
							})
								
						
							//登录成功调用该函数改变个人中心节点v-if判断值
							this.letFatherChangeStatus()
				
						}else if(res.data.code==201){
							uni.showToast({
								title:'账号或密码错误',
								icon:'error'
							})
						}else if(res.data.code==401){
							uni.showToast({
								title:"账号不存在",
								icon:'error'
							})
						}else{
							uni.showToast({
								title:'服务器错误',
								icon:'error'
								
							})
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title:'未知错误，即将返回首页',
							icon:'error'
						})
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			// 登录成功调用此函数申请将父组件传来的状态值改变，从而显示个人中心节点
			letFatherChangeStatus(){
				this.$emit('letFatherChangeStatus',this.isLogin)
			},
			// 登录组件向父组件user-center申请改变当前组件的status值从而隐藏自己，显示注册组件
			goRegister(){
				this.$emit('goRegister',this.status)
			},
			//登录成功后会调用该函数发起请求获取当前用户的账号信息
			getUserInfo(){
				let url = this.$url.userInfo+'?uid='+this.uname
				uni.request({
					url:url,
					method:'GET',
					success: (res) => {
						console.log('登录成功后查询到的当前用户信息：',res);
					}
				})
			},
			
			
			
			
			
			waitbuild(){
				uni.showToast({
					title:"暂时无法使用",
					mask:true,
					icon:'error'
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 0 !important;
	.login-container{
		padding: 35px 17px;
	}
	.disabled{
		margin: 40rpx 0 20rpx 0;
		border-radius: 40rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #A5A4A4;
	}
	.check{
		padding: 40rpx;
		text-align: center;
		.notAgree{
			color: #8F939C;
		}
		.rules{
			color: #00BFFF;
		}
		.agree{
			color: #000000;
		}
	}
	.icontext{
		text-align: center;
	}
	.other-platform{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
	}
	.loginHr{
		margin-top: 120rpx;
		color: #808080; 
		display: flex; 
		justify-content: center;
	}
	.loginbtn{
		margin: 40rpx 0 20rpx 0;
		border-radius: 40rpx;
		background-color: #0AA1ED;
		font-size: 24rpx;
		color: #FFFFFF;
		&:active{
			background-color: #0890d4;
		}
	}
	padding: 70rpx 35rpx;
	.input-group{
		margin-bottom: 20rpx;
		border-bottom: 1px solid #C8C7CC;
		display: flex;
		align-items: center;
		text{
			margin: 0 15rpx;
		}
	}
}
</style>
